﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Organic store</title>
<!-- main css -->
  <link rel="stylesheet" th:href="@{/assets/css/main.css}">
  <!-- main css -->
  <!--vue-->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!--axios-->
  <script src="https://unpkg.com/axios@0.21.4/dist/axios.min.js"></script>
</head>
<body>


<!-- Navigation -->
<div class="top-bg">
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-12 top-div top1">
        <ul>
          <li><a href="mailto:info.organicstore@gmail.com"><i class="fa fa-envelope"></i> &nbsp;info.organicstore@gmail.com</a></li>
          <li>|</li>
          <li><i class="fa fa-phone" aria-hidden="true"></i> +12 345 6789</li>
        </ul>
      </div>
      <div class="col-lg-7 col-md-6 col-md-12 position-relative">
        <div class="right-div">
          <ul>
            <li>
              <ul class="social-network">
                <li><a href="#" class="icoRss" title=""><i class="fa fa-rss"></i></a></li>
                <li><a href="#" class="icoFacebook" title=""><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" class="icoTwitter" title=""><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" class="icoGoogle" title=""><i class="fa fa-google-plus"></i></a></li>
                <li><a href="#" class="icoLinkedin" title=""><i class="fa fa-linkedin"></i></a></li>
              </ul>
            </li>
            <li>
              <ul class="top-ul">
                <li>
                  <div class="dropdown"> <a class="dropdown-toggle" href="" data-toggle="dropdown"><img th:src="@{/assets/images/flag.jpg}" alt="" title=""> English <i class="fa fa-angle-down"></i></a>
                    <div class="dropdown-menu flag-css dropdown-menu-right"> <a href="#">English</a> <a href="#"><span class="flag-icon flag-icon-fr"> </span>French</a> <a href="#"><span class="flag-icon flag-icon-it"> </span>Italian</a> <a href="#"><span class="flag-icon flag-icon-ru"> </span>Russian</a> </div>
                  </div>
                </li>
                <li>
                  <div class="dropdown"> <a class="dropdown-toggle currency" href="" data-toggle="dropdown"> <i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu drop1 dropdown-menu-right">
                      <li class="dropdown-item"><a href="#"> US Dollar</a></li>
                      <li class="dropdown-item"><a href="#"> British Pound</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
            <li>
              <div class="rate-price rate-price2">
                <ul>
                  <li class="dropdown"> <a class="dropdown-toggle" href="" data-toggle="dropdown"> <i class="fa fa-user-circle-o" aria-hidden="true"></i></a>
                    <div class="dropdown-menu dropdown-menu-right animate slideIn"> <a class="dropdown-item" href="#">Login</a> <a class="dropdown-item" href="#">My Account</a> <a class="dropdown-item" href="#">Register</a> <a class="dropdown-item" href="#">Forgot Password</a> </div>
                  </li>
                  <li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i><span class="circle-2">1</span></a></li>
                  <li class="dropdown"> <a class="dropdown-toggle link" href="" data-toggle="dropdown"><i class="fa fa-shopping-bag" aria-hidden="true"></i><span class="circle-2">1</span></a>
                    <div class="dropdown-menu dropdown-menu2 dropdown-menu-right  animate slideIn">
                      <div class="container">
                        <div class="row">
                          <div class="col-3"><img th:src="@{/assets/images/fruits/img-1.jpg}" alt="" title="" class="img-fluid"></div>
                          <div class="col-9">
                            <p>1 x Product Name... <span class="price">$ 14.70</span></p>
                            <a href="" class="close">x</a> </div>
                          <div class="col-md-12">
                            <hr>
                          </div>
                          <div class="col-3"><img th:src="@{/assets/images/fruits/img-2.jpg}" alt="" title="" class="img-fluid"></div>
                          <div class="col-9">
                            <p>1 x Product Name... <span class="price">$ 14.70</span></p>
                            <a href="" class="close">x</a> </div>
                          <div class="col-md-12">
                            <hr>
                          </div>
                          <div class="col-3"><img   th:src="@{/assets/images/fruits/img-1.jpg}" height="200" width="268"/></div>
                          <div class="col-9">
                            <p>1 x Product Name... <span class="price">$ 14.70</span></p>
                            <a href="" class="close">x</a> </div>
                          <div class="col-md-12">
                            <hr>
                          </div>
                          <div class="col-3"><img th:src="@{/assets/images/fruits/img-4.jpg}" alt="" title="" class="img-fluid"></div>
                          <div class="col-9">
                            <p>1 x Product Name... <span class="price">$ 14.70</span></p>
                            <a href="" class="close">x</a> </div>
                          <div class="col-md-12">
                            <hr>
                          </div>
                          <div class="col-3">
                            <p class="font-15">Tax </p>
                          </div>
                          <div class="col-9 text-right"> <span class="font-15">$ 2.80</span> </div>
                          <div class="col-md-12">
                            <hr>
                          </div>
                          <div class="col-3">
                            <p class="font-15"><strong>Total</strong></p>
                          </div>
                          <div class="col-9 text-right"> <span class="font-15"><strong>$ 10.80</strong></span> </div>
                          <div class="col-md-12">
                            <hr>
                          </div>
                          <div class="col-md-12 text-center">
                            <input type="button" value="Check out" class="btn check-out w-100">
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="clearfix"></div>
<nav class="navbar navbar-expand-lg navbar-dark bg-white">
  <div class="container"> <a class="navbar-brand" href="index#"><img  th:src="@{/assets/images/logo-1.png}" height="56" width="51"/> </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">


    </div>
    <div class="clearfix"></div>
  </div>
  <div class="clearfix"></div>
</nav>
<!-- Navigation -->
<div class="container">

  <div class="row" id="shopcart">
    <div class="col-12 col-xl-8 mb-4">
      <div class="table-responsive cart-table table-borderless">
        <table class="table">
          <thead>
            <tr>
              <th class="text-center">菜品名称</th>
              <th class="text-center">菜品图片</th>
              <th class="text-center">菜品价格</th>
              <th class="text-center">菜品数量</th>
              <th>小计</th>
              <th> </th>
            </tr>
          </thead>
          <tbody>

            <tr v-for="shopcart in shopcartList" :key="shopcart.id">
              <td>{{shopcart.dishesName}}</td>
<!--
              <td  class="product-thumbnail text-center"><a href=""><img src={{shopcart.dishesImage}} class="" alt=""></a></td>
-->

              <td class="text-center">{{shopcart.dishesPrice}} </td>
              <td class="product-quantity" data-title="Quantity"><div class="input-group"> <span class="input-group-btn">
                  <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[3]"> <i class="fa fa-minus"></i> </button>
                  </span>
                  <input type="text" name="quant[3]" class="form-control input-number" value="1" min="0" max="10">
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[3]"> <i class="fa fa-plus"></i> </button>
                  </span> </div></td>
              <td></td>
              <td><a href=""><i class="fa fa-trash" aria-hidden="true"></i></a></td>
            </tr>

          </tbody>
        </table>
      </div>
      <!--分页导航条-->
      <div class="row text-center">
        <ul class="pagination" style="font-size: 18px">
          <li><a href="javascript:;" @click="pre">&laquo;</a></li>
          <li v-for="page in pageNumList">
            <a href="javascript:;" @click="onePage(page)">{{page}}</a>
          </li>
          <li><a href="javascript:;" @click="next">&raquo;</a></li>
        </ul>
      </div>
    </div>
    <div class="col-12 col-xl-4 mb-5">
      <div class="cart_totals">
        <div class="table-responsive">
          <table cellspacing="0" class="table table-borderless mb-0">
            <tbody>
<!--              <tr class="shipping">
              <td colspan="2" align="left" class="mb-0 pb-0"><h5 class="m-0 p-0">折扣</h5></td>
              </tr>
              <tr>
                <td class="flat-rate"><h5>Flat rate:</h5></td>
                <td class="text-right amount">$20.00</td>
              </tr>-->
              <tr class="order-total">
                <td><h5>总价</h5></td>
                <td align="right">$40.00</td>
              </tr>
            </tbody>
          </table>
          <a href="checkout#" class="btn cart w-100"> 结算</a> </div>
      </div>
    </div>
  </div>


</div>
<div class="clearfix"></div>
<div id="newsletter">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
      </div>
      <div class="col-md-5">
<!--
        <form action="" method="post" id="subsForm" onSubmit="return ajaxmailsubscribe();">
        <div class="input-group">
          <input type="email" name="subsemail" id="subsemail" class="form-control newsletter" placeholder="Enter your mail">
          <span class="input-group-btn">
          <button class="btn btn-theme" type="button" onClick="return ajaxmailsubscribe();">Subscribe</button>
          </span> </div>
          </form>
-->
      </div>
    </div>
  </div>
</div>



<p data-toggle="modal" class="no-margin" data-target="#myModal" id="model2"></p>
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-dialog2">
    <div class="modal-content text-center">
      <div class="modal-body modal-body2">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <p><img th:src="@{/assets/images/success.svg}" width="50"></p>
        <h3 class="modal-title">Thank you</h3>
        <h4 class="thanks mt-2">Your submission is recevied and we will contact you soon.</h4>
        <a href="">BUY THIS TEMPLATE NOW</a> <a href="index#" class="back-to-home d-block small mt-2"><i class="fa fa-long-arrow-left"></i> BACK TO HOME</a> </div>
    </div>
  </div>
</div>


<script th:src="@{/assets/js/ajax.js}"></script>
<script th:src="@{/assets/js/formValidation.js}"></script>

<script th:src="@{/assets/vendor/jquery/jquery.min.js}"></script>
<!--bootstrap-->
<script th:src="@{/assets/vendor/bootstrap/js/popper.min.js}"></script>
<script th:src="@{/assets/vendor/bootstrap/js/bootstrap.min.js}"></script>
<!--bootstrap-->
<script th:src="@{/assets/vendor/wow/wow.js}"></script>
<script th:src="@{/assets/vendor/wow/page.js}"></script>
<script th:src="@{/assets/vendor/jquery/number-plsu-min.js}" type="text/javascript"></script>
<script th:src="@{/assets/vendor/jquery/custom-select.js}"></script>



<script>
    new Vue({
        el:"#shopcart",
        data:{
            uid:null,
            username:null,
            password:null,
            shopcartList:[],
            pageNumList:[],
            prePage:1,
            currentPage:1,
            nextPage:1,
            totalPage:1,
            msg:"",
            rowMusic:{id:"",status:"",collectCount:""}
        },
        methods:{
            /*搜索*/
            print:function(){
                this.onePage(this.currentPage);
            },
            /*首页上一页*/
            pre:function () {

                this.onePage(this.prePage==0?this.totalPage:this.prePage);
            },
            /*首页下一页*/
            next:function () {
                this.onePage(this.nextPage==0?1:this.nextPage);
            },
            /*首页分页*/
            onePage:function (page) {
                axios({
                    url:"/shopcart/listPageShopCart",
                    method:"post",
                    params:{
                        currentPage:page,
                    }
                }).then((resp)=>{
                    let data1=resp.data;
                this.shopcartList = data1.list; // 绑定购物车数据
                this.pageNumList=data1.navigatepageNums;
                this.prePage=data1.prePage;
                this.nextPage=data1.nextPage;
                this.currentPage=data1.pageNum;
                this.totalPage=data1.pages;
                console.log(this.currentPage);
            })
          }



/*            /!*注销*!/
            logout:function () {
                let flag=confirm("是否注销");
                if(flag){
                    this.uid=null;
                    location.href="http://localhost:8888/music/index.html";
                }
            },*/

        },
        mounted(){
            this.onePage(1);
        }
    })
</script>
</body>
</html>

